<template> 
    <div class="ces-main">
        <search-form 
        ref="form"
        size='mini'
        labelWidth = '50px' 
        :searchData = "searchData"
        :searchForm = "searchForm"
        :searchHandle="searchHandle"></search-form>
        <ces-table 
        size='mini'
        :isSelection='true'
        :isIndex='true'
        :isPagination='true'
        :isHandle='true'
        :tableData='tableData' 
        :tableCols='tableCols' 
        :pagination='pagination'
        @refresh="handleCurrentChange"
        >
        </ces-table>
        </div>
</template>

<script>
// import {
//     getTableAndForm, //获取资产目录详情下的数据展示的动态表格和表单
// } from '@/api/assetsManage/table/index.js';
// import {
//    getQuery //查询接口
// } from '@/api/assetsManage/assets/index.js';

//引入组件
import SearchForm from "../Common//form.vue";
import cesTable from "../Common//table.vue";

export default {
    data(){
         //表单查询一般分为input，下拉框，和日期，下面是下拉框时的设置下拉信息的情况，我的项目没有用到，但是留着方便看
       let sexs=[{label:'男',value:'M'},{label:'女',value:'F'}]
      let sexProps={label:'label',value:'value'}
        return {
             searchData:{ //查询表单的对应的值
                name:'',
                sex:null,
            },
            searchForm:[ //这里是渲染查询表单的表头和类型的数据
                {type:'Input',label:'姓名',prop:'name', width:'180px',placeholder:'请输入姓名...'},
                {type:'Select',label:'性别',prop:'sex',width:'180px',options:sexs,props:sexProps,change:row=>'',placeholder:'请选择性别...'},
            ],
            searchHandle:[ //查询和重置按钮
                {label:'查询',type:'primary',handle:this.handleQuery},
                {label:'重置',type:'primary',handle:this.handleReset}
            ],
            apiId:'null',
            fieldList:[],
            // 表格
            tableData:[
                {name:'刘小',age:'10'},
                 {name:'李一',age:'2'},
                ],//表格数据
            tableCols:[ //表格列数据
                {label:'姓名',prop:'name'},
                {label:'年龄',prop:'age'},
            ],
           tableHandles:[  //这是表格和表单之间的一个按钮，我的项目不需要
               {label:'新增',type:'primary',handle:row=>''}
           ],
            pagination:{ //分页数据
                pageSize:10,
                pageNum:1,
                total:0
            },
          
        }
    },

   components:{ //引入组件后注册组件
    cesTable, 
    SearchForm
   },
   mounted(){
    //   this.getTableAndForm()
   },
    methods:{
         //此方法是点击分页时触发的查询，
        handleCurrentChange(){
          this.getQuery()
        },
        //获取表格和表单数据
        async getTableAndForm(){
           this.searchData={}
           this.searchForm = []
           this.tableCols = []
           const res = await  getTableAndForm(this.$route.params.id)
           if(res.data.infoCode == 200){
                this.$emit('tableFun', res.data.data[0])
                const result = res.data.data[3]
                this.fieldList = result
                this.apiId = res.data.data[2]
                result.forEach( e => {
                    var obj = {type:'',label:'', width:'180px'}
                    if(e.showType == 1 || e.showType == 2){
                        obj.type = "Input"
                        obj.prop=e.code
                        obj.placeholder = '请输入...'
                    }
                     if(e.showType == 3){
                        obj.type = "datetimerange"
                          obj.prop=e.code
                    }
                    obj.label = e.name
                    if(e.value == undefined){
                        e.value = ""
                    }
                    this.$set( this.searchData, e.code, e.value)
                    this.searchForm.push(obj)
                })
                const result2 = res.data.data[4]
                result2.forEach( e => {
                    var obj ={}
                    obj.label = e
                    obj.prop = e
                    this.tableCols.push(obj)
                })
                this.tableData =  res.data.data[5]
                this.pagination.pageSize = Number(res.data.data[0])  
                this.pagination.total = res.data.data[1]

                if(this.searchForm.length == 0 ){
                    this. searchHandle = []
                }
           }         
         },
       

        //查询
        getQuery(){
            var info={
                apiId:this.apiId,
                pageNum:this.pagination.pageNum,
                pageSize:this.pagination.pageSize
            } 
             var str = ''
             if(this.searchData.create_time && this.searchData.create_time.length == "2"){

                this.searchData.create_time.forEach(e => {      
                   
                    var d = new Date(e);
                    var h =d.getHours()
                    var m = d.getMinutes()
                    var s = d.getSeconds()
                    if(h== 0){
                    h = "00"
                    }
                    if(m== 0){
                    m = "00"
                    }
                    if(s== 0){
                    s = "00"
                    }
                    e=d.getFullYear() + '-' + (d.getMonth() + 1) + '-' + d.getDate() + ' ' + h + ':' + m + ':' + s;              
                    str = str +','+ e           
                }) 
                str = str.substr(1)
                console.log(str)  
             }
           
            
            this.fieldList.forEach(e => {
                 for(var i in this.searchData){
                   if(e.code == i && e.queryType == 1){
                       e.value = this.searchData[i]
                         e.createTime = ''
                   }
                    if(e.code == i && e.queryType == 3){
                        e.createTime = ''
                       e.value = str
                   }
                }
            })        
            getQuery(info, this.fieldList).then(res => {
                if(res.data.infoCode ==200){
                  this.tableData =  res.data.data[1]
                  this.pagination.total = res.data.data[0]
                }

            }).catch(()=>{

            })
        },
        handleQuery(){ //查询
            this.getQuery()
        },
        handleReset(){  //重置
          for(var i in this.searchData){
            this.$set( this.searchData, i, '') 
          }
          this.getQuery()
        }
  }
}
</script>

<style lang="scss" scoped>

</style>